<template>
  <div @mouseover="showset" @mouseout="hideset" :style="{color:moddata.config.fontcolor}" class="mod">
    <div>
      <div class="con">
        <div class="title" v-show="moddata.config.titleshow"><span><i class="iconfont icon-people_fill"></i>&nbsp;{{moddata.config.title}}</span></div>
        <div :id="this.moddata.id"></div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset"><i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod"><i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["moddata", "index"],
    data: function () {
      return {
        maskshow: false
      }
    },
    mounted() {
      var that = this;
      $.post(that.moddata.url,{
        moddata: JSON.stringify(that.moddata)
      }, function (e) {
        $("#" + that.moddata.id).html(e);
      });
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$emit('setmod', this.moddata.id, this.index , this.moddata.type )
      },
      deletemod: function () {
        this.$emit("delreq", this.index)
      }
    }
  }
</script>

<style>

</style>